# @Version        : 1.0
# @Update Time    : 2025/3/15 13:41
# @File           : verification_view.py
# @IDE            : PyCharm
# @Desc           : 文件描述信息
import flet as ft


class VerificationView(ft.Container):
    def __init__(self, page: ft.Page, params: dict = None):
        super().__init__()
        self.page = page
        self.params = params
        self.primary_color = "#4CAF50"  # 主绿色
        self.input_border = "#BDBDBD"  # 输入框边框色
        self.focus_color = "#388E3C"  # 聚焦状态颜色
        self.email = "ceshi@email.com"

        # 验证码输入框
        self.code_fields = [self._build_code_field(i) for i in range(4)]

        # 主容器配置
        self.width = 400
        self.padding = 30
        self.border_radius = 10

        self.content = ft.Column(
            [
                self._build_title(),
                self._build_email_notice(),
                self._build_code_inputs(),
                self._build_resend_link(),
                self._build_verify_button(),
                self._build_terms()
            ], spacing=20, horizontal_alignment=ft.CrossAxisAlignment.CENTER
        )

    def _build_title(self):
        return ft.Text(
            "验证您的身份",
            size=28,
            weight=ft.FontWeight.BOLD,
            color=self.primary_color
        )

    def _build_email_notice(self):
        return ft.Column(
            [
                ft.Text(
                    f"我们刚刚向 {self.email} 发送了验证码",
                    size=12,
                    color="#666666",
                    text_align=ft.TextAlign.CENTER,
                ),
                ft.Container(height=30)
            ],
            horizontal_alignment=ft.CrossAxisAlignment.CENTER
        )

    def _build_code_field(self, index):
        return ft.TextField(
            width=60,
            height=60,
            text_size=24,
            # 绿色字
            color=self.primary_color,
            border_radius=8,
            border_color=self.input_border,
            focused_border_color=self.focus_color,
            text_align=ft.TextAlign.CENTER,
            max_length=1,
            keyboard_type=ft.KeyboardType.NUMBER,
            on_change=lambda e, i=index: self._handle_code_input(e, i)
        )

    def _build_code_inputs(self):
        return ft.Row(
            controls=self.code_fields,
            spacing=20,
            alignment=ft.MainAxisAlignment.CENTER
        )

    def _build_resend_link(self):
        return ft.Text(
            "没有收到验证码？重新发送验证码",
            size=12,
            color="#666666",
            style=ft.TextThemeStyle.BODY_MEDIUM,
            # decoration=ft.TextDecoration.UNDERLINE,
            # on_click=lambda e: print("重发验证码")
        )

    def _build_verify_button(self):
        return ft.ElevatedButton(
            content=ft.Text("验证", size=16),
            bgcolor=self.primary_color,
            color=ft.colors.WHITE,
            width=300,
            height=45,
            elevation=0,
            on_click=self._handle_verification,
            style=ft.ButtonStyle(
                shape=ft.RoundedRectangleBorder(radius=8)
            )
        )

    def _build_terms(self):
        return ft.Text(
            "通过注册，您同意我们的条款和协议",
            size=12,
            color="#666666",
            text_align=ft.TextAlign.CENTER
        )

    def _handle_code_input(self, e, index):
        # 自动跳转下一个输入框
        if e.control.value and index < 3:
            self.code_fields[index + 1].focus()

    def _handle_verification(self, e):
        code = "".join(field.value for field in self.code_fields)
        if len(code) == 4:
                self.handle_verify(code)
        else:
            # 错误处理
            for field in self.code_fields:
                field.error_text = "请输入完整验证码"
            self.update()

    def handle_verify(self, code):
        print(f"提交验证码: {code}")
        # 实际验证逻辑...


# 使用示例
def main(page: ft.Page):
    page.bgcolor = "#F5F5F5"
    page.padding = 40
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def handle_verify(code):
        print(f"提交验证码: {code}")
        # 实际验证逻辑...

    view = VerificationView(page)
    page.add(view)


if __name__ == "__main__":
    ft.app(target=main)